import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Link, browserHistory } from 'react-router'
import request from '../request'
import Joi from 'joi'
import cn from 'classnames'

class Register extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            errs: []
        }
    }

    submit(e) {
        e.preventDefault()
        this.validate().done(()=> {
            request("users/create", "POST", _.serializeForm($("#register_form"))).done(res => {
                browserHistory.push(null, "/login")
            })
        })
    }

    static validate_schema = Joi.object().keys({
        username: Joi.string().alphanum().min(4).max(30).required(),
        email: Joi.string().email(),
        password: Joi.string().regex(/^[a-zA-Z0-9]{6,30}$/).required()
    });

    validate() {
        let deferred = $.Deferred()
        Joi.validate(_.serializeForm($("#register_form")), Register.validate_schema, (err)=> {
            if (err) {
                this.setState({errs: err.details})
                deferred.reject(err)
            } else {
                this.setState({errs: []})
                deferred.resolve()
            }
        })
        return deferred.promise()
    }

    onBlur() {
        this.validate()
    }

    onChange() {
        if (this.state.errs.length)
            this.validate()
    }

    render() {
        let username_err = _.find(this.state.errs, {"path": "username"})
        let email_err = _.find(this.state.errs, {"path": "email"})
        let password_err = _.find(this.state.errs, {"path": "password"})

        return (
            <div className="ui container pt20">
                <form id="register_form" className="ui form" onSubmit={::this.submit} noValidate="novalidate">
                    <h2 className="ui header">注册
                        <div className="sub header">已有帐号？<Link to="login">登录></Link></div>
                    </h2>
                    <div className={cn("field", {"error": username_err }) }>
                        <div className="ui large input left icon">
                            <input type="text" className="form-control" name="username" placeholder="用户名"
                                onBlur={::this.onBlur} onChange={::this.onChange} />
                            <i className="user icon"></i>
                        </div>
                        <p className={cn("field-error", {"fn-none": !username_err }) }>{username_err && username_err.message}</p>
                    </div>
                    <div className={cn("field", {"error": email_err }) }>
                        <div className="ui large input left icon">
                            <input type="text" className="form-control" name="email" placeholder="邮箱"
                                onBlur={::this.onBlur} onChange={::this.onChange} />
                            <i className="user icon"></i>
                        </div>
                        <p className={cn("field-error", {"fn-none": !email_err }) }>{email_err && email_err.message}</p>
                    </div>
                    <div className={cn("field", {"error": password_err }) }>
                        <div className="ui large input left icon">
                            <input type="password" className="form-control" name="password" placeholder="密码"
                                onBlur={::this.onBlur} onChange={::this.onChange} />
                            <i className="lock icon"></i>
                        </div>
                        <p className={cn("field-error", {"fn-none": !password_err }) }>{password_err && password_err.message}</p>
                    </div>
                    <button type="submit" className="ui primary button">提交</button>
                </form>
            </div>
        )
    }
}

export default Register
